जावास्क्रिप्ट कोड क्वालिटी गेट्स: प्री-कमिट हुक कॉन्फिगरेशनमध्ये प्रभुत्व मिळवणे

सॉफ्टवेअर डेव्हलपमेंटच्या सतत बदलणाऱ्या जगात, उच्च कोड गुणवत्ता राखणे अत्यंत महत्त्वाचे आहे. स्वच्छ, सुव्यवस्थित आणि बग-मुक्त कोड केवळ देखभालीचा खर्च कमी करत नाही, तर सहकार्याला प्रोत्साहन देतो आणि डेव्हलपमेंटची प्रक्रिया वेगवान करतो. कोड गुणवत्ता लागू करण्यासाठी एक प्रभावी तंत्र म्हणजे कोड क्वालिटी गेट्सची प्री-कमिट हुक्स वापरून अंमलबजावणी करणे. हा लेख जावास्क्रिप्ट प्रकल्पांसाठी प्री-कमिट हुक्स कॉन्फिगर करण्यासाठी एक सर्वसमावेशक मार्गदर्शक आहे, ज्यामुळे तुम्ही तुमच्या रिपॉझिटरीमध्ये कोड पोहोचण्यापूर्वीच कोड गुणवत्ता तपासणी स्वयंचलित करू शकता.

प्री-कमिट हुक्स म्हणजे काय?

गिट हुक्स हे असे स्क्रिप्ट्स आहेत जे गिट कमिट, पुश आणि रिसीव्ह सारख्या इव्हेंट्सच्या आधी किंवा नंतर कार्यान्वित करतो. विशेषतः, प्री-कमिट हुक्स कमिट अंतिम होण्यापूर्वी चालतात. ते कमिट केल्या जाणाऱ्या बदलांची तपासणी करण्याची आणि पूर्वनिर्धारित गुणवत्ता मानकांची पूर्तता न करणाऱ्या कमिट्सना प्रतिबंधित करण्याची एक महत्त्वाची संधी देतात. त्यांना असे गेटकीपर समजा जे तुमच्या कोडबेसमध्ये कमी-गुणवत्तेचा कोड येण्यापासून रोखतात.

जावास्क्रिप्ट कोड क्वालिटीसाठी प्री-कमिट हुक्स का वापरावेत?

• लवकर त्रुटी शोधणे: प्री-कमिट हुक्स डेव्हलपमेंट प्रक्रियेच्या सुरुवातीलाच कोड गुणवत्तेच्या समस्या ओळखतात, ज्यामुळे त्या पुढे पसरत नाहीत. कोड रिव्ह्यू दरम्यान किंवा त्याहूनही वाईट, प्रोडक्शनमध्ये समस्या शोधण्यापेक्षा हे अधिक कार्यक्षम आहे.
• स्वयंचलित कोड फॉरमॅटिंग: तुमच्या टीम आणि प्रोजेक्टमध्ये एकसमान कोड शैली सुनिश्चित करा. स्वयंचलित फॉरमॅटिंगमुळे शैलीत्मक वाद टळतात आणि कोडबेस अधिक वाचनीय बनतो.
• कोड रिव्ह्यूचा भार कमी करणे: कोडिंग मानके स्वयंचलितपणे लागू केल्यामुळे, प्री-कमिट हुक्स कोड रिव्ह्यू करणाऱ्यांवरील भार कमी करतात, ज्यामुळे ते आर्किटेक्चरल निर्णय आणि जटिल लॉजिकवर लक्ष केंद्रित करू शकतात.
• सुधारित कोड मेंटेनेबिलिटी: एकसमान आणि उच्च-गुणवत्तेचा कोडबेस कालांतराने सांभाळणे आणि विकसित करणे सोपे होते.
• एकसारखेपणाची अंमलबजावणी: ते सुनिश्चित करतात की सर्व कोड प्रोजेक्टच्या मानकांनुसार आहे, मग तो कोणत्याही डेव्हलपरने लिहिला असो. हे विशेषतः विविध ठिकाणी - जसे की लंडन, टोकियो आणि ब्युनोस आयर्स - काम करणाऱ्या वितरित टीममध्ये महत्त्वाचे आहे, जिथे वैयक्तिक कोडिंग शैली भिन्न असू शकतात.

जावास्क्रिप्ट कोड क्वालिटीसाठी महत्त्वाची साधने

जावास्क्रिप्ट कोड गुणवत्ता तपासणी स्वयंचलित करण्यासाठी प्री-कमिट हुक्ससोबत अनेक साधने सामान्यतः वापरली जातात:

• ESLint: एक शक्तिशाली जावास्क्रिप्ट लिंटर जे संभाव्य त्रुटी ओळखते, कोडिंग शैली लागू करते आणि कोडची वाचनीयता सुधारण्यास मदत करते. हे विविध नियमांना समर्थन देते आणि अत्यंत कॉन्फिगर करण्यायोग्य आहे.
• Prettier: एक ओपिनियनेटेड कोड फॉरमॅटर जे कोडला एकसमान शैलीनुसार स्वयंचलितपणे फॉरमॅट करते. हे जावास्क्रिप्ट, टाइपस्क्रिप्ट, JSX आणि इतर अनेक भाषांना समर्थन देते.
• Husky: एक साधन जे गिट हुक्स व्यवस्थापित करणे सोपे करते. हे तुम्हाला गिट वर्कफ्लोच्या वेगवेगळ्या टप्प्यांवर कार्यान्वित होणारे स्क्रिप्ट्स परिभाषित करण्याची परवानगी देते.
• lint-staged: एक साधन जे फक्त स्टेज केलेल्या फाइल्सवर लिंटर्स आणि फॉरमॅटर्स चालवते, ज्यामुळे प्री-कमिट प्रक्रिया लक्षणीयरीत्या वेगवान होते. हे न बदललेल्या फाइल्सवर अनावश्यक तपासणी टाळते.

प्री-कमिट हुक्स कॉन्फिगर करणे: एक स्टेप-बाय-स्टेप मार्गदर्शक

तुमच्या जावास्क्रिप्ट प्रोजेक्टसाठी Husky आणि lint-staged वापरून प्री-कमिट हुक्स कसे सेट करायचे यासाठी येथे एक सविस्तर मार्गदर्शक आहे:

पायरी १: डिपेन्डन्सी इन्स्टॉल करा

प्रथम, npm किंवा yarn वापरून आवश्यक पॅकेजेस डेव्हलपमेंट डिपेन्डन्सी म्हणून इन्स्टॉल करा:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

किंवा, yarn वापरून:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

पायरी २: Husky सुरू करा

Husky गिट हुक्स व्यवस्थापित करण्याची प्रक्रिया सोपी करते. खालील कमांड वापरून ते सुरू करा:

            npx husky install
            

              
                Copy
              
            
          

हे तुमच्या प्रोजेक्टमध्ये `.husky` डिरेक्टरी तयार करेल, जिथे तुमचे गिट हुक्स संग्रहित केले जातील.

पायरी ३: प्री-कमिट हुक कॉन्फिगर करा

Husky वापरून एक प्री-कमिट हुक जोडा:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

ही कमांड `.husky` डिरेक्टरीमध्ये एक `pre-commit` फाइल तयार करते आणि त्यात `npx lint-staged` ही कमांड जोडते. हे गिटला प्रत्येक कमिटपूर्वी lint-staged चालवण्यास सांगते.

पायरी ४: lint-staged कॉन्फिगर करा

lint-staged तुम्हाला फक्त स्टेज केलेल्या फाइल्सवर लिंटर्स आणि फॉरमॅटर्स चालवण्याची परवानगी देतो, ज्यामुळे प्री-कमिट प्रक्रिया लक्षणीयरीत्या वेगवान होते. तुमच्या प्रोजेक्ट रूटमध्ये `lint-staged.config.js` (किंवा ES मॉड्यूल्ससाठी `lint-staged.config.mjs`) फाइल तयार करा आणि खालीलप्रमाणे कॉन्फिगर करा:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

हे कॉन्फिगरेशन lint-staged ला सर्व स्टेज केलेल्या जावास्क्रिप्ट आणि टाइपस्क्रिप्ट फाइल्सवर ESLint आणि Prettier चालवण्यास सांगते. ESLint मधील `--fix` फ्लॅग स्वयंचलितपणे दुरुस्त करता येणाऱ्या लिंटिंग त्रुटी दुरुस्त करतो आणि Prettier मधील `--write` फ्लॅग फाइल्स फॉरमॅट करतो आणि फॉरमॅट केलेल्या कोडने त्यांना ओव्हरराइट करतो.

वैकल्पिकरित्या, तुम्ही थेट तुमच्या `package.json` फाइलमध्ये कॉन्फिगरेशन परिभाषित करू शकता:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

पायरी ५: ESLint कॉन्फिगर करा

जर तुम्ही आधीच केले नसेल, तर तुमच्या प्रोजेक्टसाठी ESLint कॉन्फिगर करा. तुम्ही खालील कमांड वापरून ESLint कॉन्फिगरेशन फाइल तयार करू शकता:

            npx eslint --init
            

              
                Copy
              
            
          

हे तुम्हाला तुमच्या प्रोजेक्टच्या आवश्यकतेनुसार ESLint कॉन्फिगरेशन फाइल (`.eslintrc.js`, `.eslintrc.json`, किंवा `.eslintrc.yml`) तयार करण्याच्या प्रक्रियेत मार्गदर्शन करेल. तुम्ही विविध पूर्वनिर्धारित कॉन्फिगरेशन्समधून निवडू शकता किंवा स्वतःचे कस्टम नियम तयार करू शकता.

उदाहरणार्थ `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

हे कॉन्फिगरेशन शिफारस केलेल्या ESLint नियमांना, शिफारस केलेल्या React नियमांना, शिफारस केलेल्या TypeScript नियमांना विस्तारित करते आणि Prettier सोबत एकत्रित होते. हे `react/prop-types` नियम अक्षम करते आणि `no-unused-vars` नियमाला चेतावणी म्हणून सेट करते.

पायरी ६: Prettier कॉन्फिगर करा

तुमच्या प्रोजेक्ट रूटमध्ये `.prettierrc.js` (किंवा `.prettierrc.json`, `.prettierrc.yml`, किंवा `.prettierrc.toml`) फाइल तयार करून Prettier कॉन्फिगर करा. तुम्ही तुमच्या प्रोजेक्टच्या शैली मार्गदर्शक तत्त्वांनुसार Prettier चे फॉरमॅटिंग पर्याय सानुकूलित करू शकता.

उदाहरणार्थ `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

हे कॉन्फिगरेशन Prettier ला सिंगल कोट्स, सेमीकोलन नाही, ट्रेलिंग कॉमा, 120 कॅरॅक्टर्सची प्रिंट विड्थ आणि 2 स्पेसेसची टॅब विड्थ वापरण्यासाठी सेट करते.

वैकल्पिकरित्या, तुम्ही `package.json` मध्ये Prettier कॉन्फिगरेशन परिभाषित करू शकता:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

पायरी ७: तुमचे कॉन्फिगरेशन तपासा

तुमचे कॉन्फिगरेशन तपासण्यासाठी, काही बदल स्टेज करा आणि त्यांना कमिट करण्याचा प्रयत्न करा. उदाहरणार्थ:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

जर काही लिंटिंग किंवा फॉरमॅटिंग समस्या असतील, तर ESLint आणि Prettier त्यांना स्वयंचलितपणे दुरुस्त करतील (शक्य असल्यास) किंवा त्रुटी नोंदवतील. जर त्रुटी नोंदवल्या गेल्या, तर कमिट रद्द केली जाईल, ज्यामुळे तुम्हाला पुन्हा कमिट करण्यापूर्वी समस्या दुरुस्त करण्याची संधी मिळेल.

प्रगत कॉन्फिगरेशन पर्याय

वेगवेगळे लिंटर्स आणि फॉरमॅटर्स वापरणे

तुम्ही तुमच्या प्री-कमिट हुक कॉन्फिगरेशनमध्ये इतर लिंटर्स आणि फॉरमॅटर्स सहजपणे समाकलित करू शकता. उदाहरणार्थ, तुम्ही CSS किंवा SASS फाइल्स लिंट करण्यासाठी Stylelint वापरू शकता:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

त्यानंतर, Stylelint समाविष्ट करण्यासाठी तुमची `lint-staged.config.js` फाइल अपडेट करा:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

कमिट करण्यापूर्वी टेस्ट्स चालवणे

तुम्ही प्री-कमिट हुकचा भाग म्हणून तुमच्या युनिट टेस्ट्स देखील चालवू शकता. हे सुनिश्चित करण्यास मदत करते की तुमचा कोड कमिट होण्यापूर्वी योग्यरित्या काम करत आहे. समजा तुम्ही Jest वापरत आहात:

            npm install --save-dev jest
            

              
                Copy
              
            
          

तुमची `lint-staged.config.js` फाइल टेस्ट कमांड समाविष्ट करण्यासाठी अपडेट करा:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

`--findRelatedTests` फ्लॅग Jest ला फक्त बदललेल्या फाइल्सशी संबंधित टेस्ट्स चालवण्यास सांगतो, ज्यामुळे प्रक्रिया लक्षणीयरीत्या वेगवान होते.

प्री-कमिट हुक्स वगळणे

काही प्रकरणांमध्ये, तुम्हाला प्री-कमिट हुक्स तात्पुरते वगळण्याची इच्छा असू शकते. तुम्ही `git commit` कमांडसोबत `--no-verify` फ्लॅग वापरून हे करू शकता:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

तथापि, हुक्स वगळणे टाळण्याची शिफारस केली जाते, जोपर्यंत अत्यंत आवश्यक नसेल, कारण ते कोड गुणवत्ता राखण्यात महत्त्वपूर्ण भूमिका बजावतात.

सामान्य समस्यांचे निराकरण

• हुक्स चालत नाहीत: Husky योग्यरित्या इन्स्टॉल आणि सुरू केले आहे याची खात्री करा आणि तुमच्या प्रोजेक्ट रूटमध्ये `.husky` डिरेक्टरी अस्तित्वात आहे. तसेच `.husky` डिरेक्टरीमधील `pre-commit` फाइल एक्झिक्युटेबल असल्याची खात्री करा.
• लिंटिंग त्रुटी दुरुस्त होत नाहीत: ESLint सोबत `--fix` फ्लॅग वापरला गेला आहे याची खात्री करा आणि तुमचे ESLint कॉन्फिगरेशन काही प्रकारच्या त्रुटी स्वयंचलितपणे दुरुस्त करण्यासाठी सेट केले आहे.
• Prettier फाइल्स फॉरमॅट करत नाही: Prettier सोबत `--write` फ्लॅग वापरला गेला आहे याची खात्री करा आणि तुमचे Prettier कॉन्फिगरेशन योग्यरित्या सेट केले आहे.
• प्री-कमिट हुक्स हळू चालणे: फक्त स्टेज केलेल्या फाइल्सवर लिंटर्स आणि फॉरमॅटर्स चालवण्यासाठी lint-staged वापरा. तसेच तपासल्या जाणाऱ्या नियम आणि सेटिंग्जची संख्या कमी करण्यासाठी तुमचे ESLint आणि Prettier कॉन्फिगरेशन्स ऑप्टिमाइझ करण्याचा विचार करा.
• विरोधाभासी कॉन्फिगरेशन्स: तुमचे ESLint आणि Prettier कॉन्फिगरेशन्स एकमेकांशी विरोधाभास करत नाहीत याची खात्री करा. जर ते करत असतील, तर तुम्हाला विरोध सोडवण्यासाठी एक किंवा दोन्ही कॉन्फिगरेशन्स समायोजित करण्याची आवश्यकता असू शकते. विरोध टाळण्यासाठी `eslint-config-prettier` आणि `eslint-plugin-prettier` सारखे सामायिक कॉन्फिगरेशन वापरण्याचा विचार करा.

प्री-कमिट हुक्ससाठी सर्वोत्तम पद्धती

• हुक्स जलद ठेवा: हळू हुक्स डेव्हलपरच्या उत्पादकतेवर लक्षणीय परिणाम करू शकतात. फक्त स्टेज केलेल्या फाइल्सवर प्रक्रिया करण्यासाठी lint-staged वापरा आणि तुमचे लिंटर आणि फॉरमॅटर कॉन्फिगरेशन्स ऑप्टिमाइझ करा.
• स्पष्ट त्रुटी संदेश द्या: जेव्हा एखादा हुक अयशस्वी होतो, तेव्हा डेव्हलपर्सना समस्या कशा सोडवायच्या याबद्दल मार्गदर्शन करण्यासाठी स्पष्ट आणि माहितीपूर्ण त्रुटी संदेश द्या.
• शक्य तितके स्वयंचलित करा: मॅन्युअल प्रयत्न कमी करण्यासाठी आणि एकसमानता सुनिश्चित करण्यासाठी कोड फॉरमॅटिंग आणि लिंटिंग स्वयंचलित करा.
• आपल्या टीमला शिक्षित करा: सर्व टीम सदस्यांना प्री-कमिट हुक्सचा उद्देश आणि त्यांचा प्रभावीपणे वापर कसा करायचा हे समजले आहे याची खात्री करा.
• एकसमान कॉन्फिगरेशन वापरा: तुमच्या प्रोजेक्टमध्ये ESLint, Prettier आणि इतर साधनांसाठी एकसमान कॉन्फिगरेशन ठेवा. हे सुनिश्चित करण्यात मदत करेल की सर्व कोड एकाच प्रकारे फॉरमॅट आणि लिंट केला जाईल. एक सामायिक कॉन्फिगरेशन पॅकेज वापरण्याचा विचार करा जे अनेक प्रकल्पांमध्ये सहजपणे इन्स्टॉल आणि अपडेट केले जाऊ शकते.
• आपले हुक्स तपासा: तुमचे प्री-कमिट हुक्स योग्यरित्या काम करत आहेत आणि ते कोणत्याही अनपेक्षित समस्या निर्माण करत नाहीत याची खात्री करण्यासाठी त्यांची नियमितपणे चाचणी घ्या.

जागतिक स्तरावरील विचार

जागतिक स्तरावर वितरित टीममध्ये काम करताना, खालील गोष्टी विचारात घ्या:

• साधनांची एकसमान आवृत्ती: सर्व टीम सदस्य ESLint, Prettier, Husky आणि lint-staged च्या समान आवृत्त्या वापरत असल्याची खात्री करा. हे तुमच्या `package.json` फाइलमध्ये आवृत्त्या निर्दिष्ट करून आणि डिपेन्डन्सी इन्स्टॉल करण्यासाठी npm किंवा yarn सारख्या पॅकेज मॅनेजरचा वापर करून साध्य केले जाऊ शकते.
• क्रॉस-प्लॅटफॉर्म सुसंगतता: तुमचे प्री-कमिट हुक्स वेगवेगळ्या ऑपरेटिंग सिस्टीमवर (विंडोज, macOS, लिनक्स) योग्यरित्या काम करत असल्याची खात्री करण्यासाठी त्यांची चाचणी घ्या. शक्य असेल तेव्हा क्रॉस-प्लॅटफॉर्म साधने आणि कमांड्स वापरा.
• वेळेतील फरक: प्री-कमिट हुक समस्यांविषयी टीम सदस्यांशी संवाद साधताना वेळेतील फरकांबद्दल जागरूक रहा. त्यांना समस्या लवकर सोडविण्यात मदत करण्यासाठी स्पष्ट सूचना आणि उदाहरणे द्या.
• भाषा समर्थन: जर तुमच्या प्रोजेक्टमध्ये अनेक भाषांसोबत काम करणे समाविष्ट असेल, तर तुमचे प्री-कमिट हुक्स प्रोजेक्टमध्ये वापरल्या जाणाऱ्या सर्व भाषांना समर्थन देतात याची खात्री करा. तुम्हाला प्रत्येक भाषेसाठी अतिरिक्त लिंटर्स आणि फॉरमॅटर्स इन्स्टॉल करण्याची आवश्यकता असू शकते.

निष्कर्ष

प्री-कमिट हुक्सची अंमलबजावणी करणे हा जावास्क्रिप्ट प्रकल्पांमध्ये कोड गुणवत्ता लागू करण्याचा, टीममधील सहकार्य सुधारण्याचा आणि देखभालीचा खर्च कमी करण्याचा एक प्रभावी मार्ग आहे. ESLint, Prettier, Husky आणि lint-staged सारख्या साधनांना एकत्रित करून, तुम्ही कोड फॉरमॅटिंग, लिंटिंग आणि टेस्टिंग स्वयंचलित करू शकता, ज्यामुळे फक्त उच्च-गुणवत्तेचा कोड तुमच्या रिपॉझिटरीमध्ये कमिट होईल याची खात्री होते. या मार्गदर्शिकेत दिलेल्या चरणांचे अनुसरण करून, तुम्ही एक मजबूत कोड क्वालिटी गेट सेट करू शकता जे तुम्हाला अधिक स्वच्छ, अधिक सुलभ आणि अधिक विश्वसनीय जावास्क्रिप्ट ॲप्लिकेशन्स तयार करण्यात मदत करेल. या प्रथेचा अवलंब करा आणि आजच तुमच्या टीमचा डेव्हलपमेंट वर्कफ्लो উন্নত करा.